<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <!-- 数据列表 -->
    <div class="mt10">
      <el-card shadow="never" :body-style="{ padding: '10px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">订单明细资料</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="100" stripe summary />

        <!-- 分页器 -->
        <PageModule :PageData="{ total: 500 }" />
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'OrderUmmaryAnalysis'
})
</script>

<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入货号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '样品类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '品牌',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '季节',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '客户交期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '出货日期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checked: true,
    checkboxLabel: '未完成'
  },
  {
    type: 'checkbox',
    checked: true,
    checkboxLabel: '已完成'
  },
  {
    type: 'checkbox',
    checked: true,
    checkboxLabel: '全部'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const findClicked = () => {}

// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader = ref([
  {
    label: '下单日期',
    prop: 'orderDate'
  },
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '指令号',
    prop: 'seasonType'
  },
  {
    label: '工厂货号',
    prop: 'sampleType'
  },
  {
    label: '颜色',
    prop: 'lotNo',
    width: '170'
  },
  {
    label: '号码',
    prop: 'custSTYLE',
    width: '100'
  },
  {
    label: '数量',
    prop: 'style',
    width: '160'
  },
  {
    label: '纸板号',
    prop: 'color'
  },
  {
    label: '面衬',
    prop: 'lastNo'
  },
  {
    label: '楦头',
    prop: 'moldNo',
    width: '150'
  },
  {
    label: '大底',
    prop: 'sizeNO'
  },
  {
    label: '样品类型',
    prop: 'orderQty'
  },
  {
    label: '季节',
    prop: 'shoeName'
  },
  {
    label: '客户交期',
    prop: 'sockNo'
  },
  {
    label: '出货日期',
    prop: 'deliveryDate'
  }
])
</script>

<style lang="less" scoped></style>
